<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:yh="http://www.thymeleaf.org">
<head th:replace="themes/yqq/header::resources('首页','')"></head>

<style>
.headImg span {
    bottom: 0;
    right: 0;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    margin-top: 18%;
    padding: 0 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 24px;
    height: 48px;
}
</style>


<body>
<!--top begin-->
<div th:replace="themes/yqq/header::top"></div>
<!--top end-->
<article> 
  <!--lbox begin-->
  <div class="lbox"> 
    <!--banbox begin-->
    <div class="banbox">
      <div class="banner">
        <div id="banner" class="fader">
          <li class="slide" th:each="tj:${nearTj}" th:title="${tj.title}">
          	<a th:href="@{'/article/'+${tj.cid}}" target="_blank"> 
          		<div style="position: relative;" class="headImg">
					<img th:src="@{${tj.cover}}">
					<span style="position: absolute; top: 0; left: 0;" th:text="${tj.title}">添加文字...添加文字...添加文字...</span>
				</div>
          	</a>
          </li>
          <div class="fader_controls">
            <div class="page prev" data-target="prev"></div>
            <div class="page next" data-target="next"></div>
            <ul class="pager_list">
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--banbox end--> 
    <!--headline begin-->
    <div class="headline">
      <ul>
        <li th:each="top:${nearTop}"><a th:href="@{'/article/'+${top.cid}}" th:title="${top.title}"><img th:src="@{${top.cover}}" th:alt="${top.title}"><span th:text="${top.title}">为什么说10月24日是程序员的节日？</span></a></li>
      </ul>
    </div>
    <!--headline end-->
    <div class="clearblank"></div>
    <div class="tab_box whitebg">
      <div class="tab_buttons">
        <ul>
          <li th:each="category,stat:${categoriesTop}" th:class="${stat.count==1}?'newscurrent':''"><a href="javascrpt::" th:text="${category.name}">个人博客</a></li>
        </ul>
      </div>
      <div class="newstab">
        <div class="newsitem" th:each="category:${categoriesTop}">
          <ul class="newslist">
            <li th:each="a:${category.articles}"><i></i><a th:href="@{'/article/'+${a.cid}}" th:text="${a.title}">个人博客，属于我的小世界！</a>
              <p th:text="${a.remark}">个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--tab_box end-->
    <div class="whitebg bloglist">
      <h2 class="htitle">最新博文</h2>
      <ul>

        <li th:each="a:${nearNormal}">
          <h3 class="blogtitle"><a th:href="@{'/article/'+${a.cid}}" target="_blank"><b th:if="${a.allowPing}">【顶】</b><span th:text="${a.title}"></span></a></h3>
          <span class="blogpic imgscale"><i><a href="javascript:return false;" th:text="${a.categories}">原创模板</a></i><a th:href="@{'/article/'+${a.cid}}" title=""><img th:src="@{${a.cover}}" alt=""></a></span>
          <p class="blogtext" th:text="${a.remark}">这些开源的博客程序源码，都是经过很多次版本测试的，都有固定的使用人群。我所知道的主流的博客程序有，Z-blog，Emlog，WordPress，Typecho等，免费的cms系统有，织梦cms（dedecms），phpcms，帝国cms（EmpireCMS）！... </p>
          <p class="bloginfo"><i class="avatar"><img th:src="@{/yqq/images/avatar.jpg}"></i><span th:text="${siteInfo.site_nickname}">张念祥</span><span th:text="${commons.fmtdate(a.created, 'yyyy-MM-dd')}">2018-10-28</span><span th:if="${a.tagList!=null}">【<d th:each="tag,stat:${a.tagList}"><a th:href="@{'/list?tag='+${commons.urlEncode(tag)}}" th:text="${tag}"></a><d th:text="${stat.count!=#lists.size(a.tagList)?',':''}"></d></d>】</span></p>
          <a th:href="@{'/article/'+${a.cid}}" class="viewmore">阅读更多</a> </li>
        <li>
        
      </ul>
    </div>
    <!--bloglist end--> 
  </div>
  <div class="rbox">
<!--     <div class="card"> -->
<!--       <h2>我的名片</h2> -->
<!--       <p>网名：<span th:text="${options.site_nickname}"></span></p> -->
<!--       <p>职业：<span th:text="${options.social_post}"></span></p> -->
<!--       <p>现居：<span th:text="${options.social_address}"></span></p> -->
<!--       <p>Email：<span th:text="${options.social_email}"></span></p> -->
<!--       <ul class="linkmore"> -->
<!--         <li><a href="/" target="_blank" class="iconfont icon-zhuye" title="网站地址"></a></li> -->
<!--         <li><a th:href="'http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email='+${options.social_email}" target="_blank" class="iconfont icon-youxiang" title="我的邮箱"></a></li> -->
<!--         <li><a th:href="'http://wpa.qq.com/msgrd?v=3&uin='+${options.social_qq}+'&site=qq&menu=yes'" target="_blank" class="iconfont icon---" th:title="'QQ联系我：'+${options.social_qq}"></a></li> -->
<!--         <li id="weixin"><a href="#" class="iconfont icon-weixin" th:title="'关注我的微信：'+${options.social_weixin}"></a></li> -->
<!--       </ul> -->
<!--     </div> -->
    <div class="whitebg notice" th:if="${not #lists.isEmpty(gonggao)}">
      <h2 class="htitle">网站公告</h2>
      <ul>
        <li th:each="gg:${gonggao}"><a th:href="@{'/article/'+${gg.cid}}" th:text="${gg.title}">十条设计原则教你学会如何设计网页布局!</a></li>
      </ul>
    </div>
    <div class="whitebg paihang" th:if="${not #lists.isEmpty(topRead)}">
      <h2 class="htitle">点击排行</h2>
      <section class="topnews imgscale" th:if="${topRead1!=null}"><a th:href="@{'/article/'+${topRead1.cid}}"><img th:src="@{${topRead1.cover==null or topRead1.cover==''}?'/yqq/images/h1.jpg':${topRead1.cover}}"><span th:text="${topRead1.title}"></span></a></section>
      <ul>
        <li th:each="t:${topRead}"><i></i><a th:href="@{'/article/'+${t.cid}}" th:text="${t.title}"></a></li>
      </ul>
    </div>
    <div class="whitebg tuijian" th:if="${not #lists.isEmpty(topTj)}">
      <h2 class="htitle">站长推荐</h2>
      <ul>
        <li th:each="toptj:${topTj}"><a th:href="@{'/article/'+${toptj.cid}}"><i><img th:src="@{${toptj.cover}}"></i>
          <p th:text="${toptj.title}">十条设计原则教你学会如何设计网页布局!</p>
          </a></li>
      </ul>
    </div>
    <div class="whitebg wenzi">
      <h2 class="htitle">猜你喜欢</h2>
      <ul>
        <li th:each="r:${rand}"><a th:href="@{'/article/'+${r.cid}}" th:text="${r.title}">十条设计原则教你学会如何设计网页布局!</a></li>
      </ul>
    </div>
   <div class="whitebg tongji">
      <h2 class="htitle">站点信息</h2>
      <ul>
        <li><b>建站时间</b>：<span th:text="${options.site_time}"></span></li>
        <li><b>网站名称</b>：<span th:text="${options.site_title}"></span></li>
        <li><b>文章统计</b>：<span th:text="${articleSize}"></span>条</li>
        <li><b>文章评论</b>：<span th:text="${commentSize}"></span>条</li>
        <li><b>博主昵称</b>：<span th:text="${options.site_nickname}"></span></li>
        <li><b>博主微博</b>：<a th:href="@{${options.social_weibo}}" th:text="${options.social_weibo}"></a></li>
      </ul>
    </div>
    <div class="links whitebg">
      <h2 class="htitle"><span class="sqlink"><a th:href="@{/}">申请链接</a></span>友情链接</h2>
      <ul>
        <li th:each="link:${links}"><a th:href="@{${link.slug}}" target="_blank" th:text="${link.name}">张念祥个人博客</a></li>
      </ul>
    </div>
  </div>
</article>

<div th:replace="themes/yqq/header::footer"></div>

<script th:src="@{/admin/plugins/ueditor/ueditor.parse.js}" ></script>
<script type="text/javascript">
	$(function(){
		
		var lastLI = $(".bloglist ul li:last").html();
		lastLI = $.trim(lastLI);
		if(lastLI==null||lastLI==''){
			$(".bloglist ul li:last").remove();
		}
		
		uParse('.ueparse', {
			rootPath : ctxPath+"admin/plugins/ueditor/"
		});
	});
	var tale = new $.tale();
	function checkForm() {
        tale.post({
            url: ctxPath+'comment',
            data: $("#addComment").serialize(),
            success: function (result) {
                if (result && result.success) {
                	tale.alertOk({
                        text:'评论成功',
                        then: function () {
                            setTimeout(function () {
                                window.location.reload();
                            }, 500);
                        }
                    });
                } else {
                    tale.alertError(result.msg || '登录失败');
                }
            }
        });
        return false;
    }
</script>


<div th:replace="themes/yqq/header::trans"></div>
</body>
</html>
